{extend name="admin@public/content"}
{block name="style"}

<style>
    .upload-image-box {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
    }
    td{
        width: 220px;
        height: 38px;
    }
    .one{
        width: 50%;
        float: left;
    }
    .layui-card-body { padding:0; width: 1280px; margin:0 auto; }
    .modal-form-box { padding: 0;}
    .form-group { margin-bottom: 0; padding: 2px 0;}
    .form-group1 { background: #F8F7F7; display: flex; align-items: center;}
    .form-group2 { background: #F2F2F2;}
    .form-group3 { background: #F5F5F5;}
    .form-group4 { background: #F5F5F5; display: flex; padding-bottom: 30px;}
    .control-label-left, .control-label-right { position: relative; top:12px; }
    .form-group4 .advice { display: flex; width: 40%; height: 650px;}
    .form-group4 .content { width: 60%; height:780px; overflow-y: auto;border: 2px solid #D1D1D1;
        background-color: #fff;}
</style>

{/block}

{block name="content"}
<form class="layui-form layui-box modal-form-box form-horizontal padding-top-20" action="{:request()->url()}" data-auto="true" method="post" id="recipe">
    <div class="form-group form-group1">
        <div class="one">
            <label class="col-sm-2 control-label">
                <span class="nowrap color-desc">配方名</span>
            </label>
            <div class='col-sm-8'>
                <div class="layui-input-inline" style="width:450px;">
                    <input type="text" name="name" value='{$vo.name|default=""}' required="required"  title="请输入配方名称" placeholder="请输入配方名称" class="layui-input">
                </div>
            </div>
        </div>
        <div class="one">
            <label class="col-sm-2 control-label control-label-right">
                <span class="nowrap color-desc">主图图片</span>
            </label>
            <div class='col-sm-8'>
                <div class="col-xs-3" style="width:60px; height: 60px;">
                    <div class="upload-image-box" style="background-image: url({$vo.main_pic|default='../static/plugs/uploader/theme/image.png'})">
                        <input value="{$vo.main_pic|default='../static/plugs/uploader/theme/image.png'}" type="hidden" name="main_pic">
                    </div>
                </div>
                <div class="col-xs-6">
                    <br>
                    <a data-file="one" data-type="jpg,png,jpeg" data-field="main_pic" class="btn btn-sm">上传图片</a>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group form-group2">
        {if $category}
        <div class="one">
            {volist name="category" id="vo2"}
            <div class="form-group" >
                <label class="col-sm-2 control-label">
                    <span class="nowrap color-desc">{$vo2.name}</span>
                </label>
                <div class='col-sm-8' id="attr{$vo2.id}">
                    <div class="layui-input-inline" id="attrlist{$vo2.id}"  style=" border-bottom: 1px solid rgba(0,0,0,.05);">
                        <table>
                            <!--{if isset($attr)}-->
                            {volist name="attr" id="vo3"}
                            {if $vo3.cid == $vo2.id }
                            <tr >
                                <td>{$vo3.attrname}
                                    <input type="hidden" name="attrname[]" value="{$vo3.attrname}" style="display: inline-block;">
                                    <input type="hidden" name="type[]" value="{$vo3.cid}" style="display: inline-block;">
                                    <input type="hidden" name="attrid[]" value="{$vo3.attr}" style="display: inline-block;">
                                </td>
                            </tr>
                            {/if}
                            {/volist}
                            <!--{else/}-->
                            <input type="text"  value="" readonly class="layui-input"><span style="animation-duration: 0.2s; padding-right: 20px; color: rgb(169, 68, 66); position: absolute; right: 0px; font-size: 12px; z-index: 2; display: block; width: 30px; text-align: center; pointer-events: none; top: 0px; padding-bottom: 0px; line-height: 38px;"></span>
                            <!--{/if}-->
                        </table>
                    </div>
                    <button type="button" onclick="selectAttr('{$vo2.id}')"  class="layui-btn layui-btn-primary">添加</button>
                </div>
            </div>
            {/volist}
        </div>
        {/if}
        {if $category2}
        <div class="one">
            {volist name="category2" id="vo4"}
            <div  class="form-group" >
                <label class="col-sm-2 control-label">
                    <span class="nowrap color-desc">{$vo4.name}</span>
                </label>
                <div class='col-sm-8' id="attr{$vo4.id}">
                    <div class="layui-input-inline" id="attrlist{$vo4.id}" style=" border-bottom: 1px solid rgba(0,0,0,.05);">
                        <table >
                            <!--{if isset($attr)}-->
                            {volist name="attr" id="vo5"}

                            {if $vo5.cid == $vo4.id }
                            <tr >
                                <td>{$vo5.attrname}
                                    <input type="hidden" name="attrname[]" value="{$vo5.attrname}" style="display: inline-block;">
                                    <input type="hidden" name="type[]" value="{$vo5.cid}" style="display: inline-block;">
                                    <input type="hidden" name="attrid[]" value="{$vo5.attr}" style="display: inline-block;">
                                </td>
                            </tr>
                            {/if}
                            {/volist}
                            <!--{else/}-->
                            <input type="text"  value="" readonly class="layui-input"><span style="animation-duration: 0.2s; padding-right: 20px; color: rgb(169, 68, 66); position: absolute; right: 0px; font-size: 12px; z-index: 2; display: block; width: 30px; text-align: center; pointer-events: none; top: 0px; padding-bottom: 0px; line-height: 38px;"></span>
                            <!--{/if}-->
                        </table>
                    </div>
                    <button type="button" onclick="selectAttr('{$vo4.id}')"  class="layui-btn layui-btn-primary">添加</button>
                </div>
            </div>
            {/volist}
        </div>
        {/if}
    </div>


    <div class="form-group form-group3">
        <div class="one">
            <div  class="form-group">
            <label class="col-sm-2 control-label control-label-left">
                <span class="nowrap color-desc">备注</span>
            </label>
            </div>
        </div>
        <div class="one">
            <div  class="form-group">
            <label class="col-sm-2 control-label control-label-left">
                <span class="nowrap color-desc">附件</span>
            </label>
            <div class='col-sm-8'>
                <div class="col-xs-3" style="width:120px; height: 60px;">
                    <div class="upload-image-box" align="center">
                        <input value="{$vo.uploadfile|default=''}" type="hidden" name="uploadfile">
                    </div>
                </div>
                <div class="col-xs-6">
                    <br>
                    <a data-file="one" data-type="jpg,png,jpeg,rar,pdf,docx" data-field="uploadfile" class="btn btn-sm">上传附件</a>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div class="form-group form-group4">
        <div class="advice">

            <div class='col-sm-10' style="padding: 0;">
                <textarea name="advice">{$vo.advice|default=""}</textarea>
            </div>
        </div>
        <div class="content" id='pdf-container'></div>
    </div>





    <div class="hr-line-dashed"></div>

    <div class="col-sm-4 col-sm-offset-2">
        <div class="layui-form-item text-center">
            {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'>{/if}
            {if auth("admin/formula/del")}
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
            {/if}
        </div>
    </div>
    <script>window.form.render();</script>
</form>
{/block}

{block name="script"}
<script>
    $(function () {
        $('body').on('change', '.upload-image-box input', function () {
            $('.news-item.active').css('background-image', 'url(' + this.value + ')');
            $(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
            $(this).parent().find('a').attr('href',this.value);
            $(this).parent().find('a').text("预览文件");
            if(this.value.indexOf("pdf") != -1) {
                $("#pdf-container").html("");
                loadPDF(this.value);
            }
        });

        // require(['jquery', 'ckeditor', 'angular'], function () {
        //     window.createEditor('[name="content"]', {height: 600});
        //     var app = angular.module("recipe", []).run(callback);
        //     angular.bootstrap(document.getElementById(app.name), [app.name]);
        //     function callback($rootScope) {
        //
        //     }
        // })

        require(['jquery', 'ckeditor', 'angular'], function () {
            window.createEditor('[name="advice"]', {height: 708,width:520 });
            var app = angular.module("recipe", []).run(callback);
            angular.bootstrap(document.getElementById(app.name), [app.name]);
            function callback($rootScope) {

            }
        })

        //创建
        function createPdfContainer(id,className) {
            var pdfContainer = document.getElementById('pdf-container');
            var canvasNew =document.createElement('canvas');
            canvasNew.id = id;
            canvasNew.className = className;
            pdfContainer.appendChild(canvasNew);
        };

        //渲染pdf
        //建议给定pdf宽度
        function renderPDF(pdf,i,id) {
            pdf.getPage(i).then(function(page) {

                var scale = 1.1;
                var viewport = page.getViewport(scale);

                //
                //  准备用于渲染的 canvas 元素
                //

                var canvas = document.getElementById(id);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                //
                // 将 PDF 页面渲染到 canvas 上下文中
                //
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        };
        //创建和pdf页数等同的canvas数
        function createSeriesCanvas(num,template) {
            var id = '';
            for(var j = 1; j <= num; j++){
                id = template + j;
                createPdfContainer(id,'pdfClass');
            }
        }
        //读取pdf文件，并加载到页面中
        function loadPDF(fileURL) {
            PDFJS.getDocument(fileURL).then(function(pdf) {
                //用 promise 获取页面
                var id = '';
                var idTemplate = 'cw-pdf-';
                var pageNum = pdf.numPages;
                //根据页码创建画布
                createSeriesCanvas(pageNum,idTemplate);
                //将pdf渲染到画布上去
                for (var i = 1; i <= pageNum; i++) {
                    id = idTemplate + i;
                    renderPDF(pdf,i,id);
                }

            });
        }

        var url = "{$vo.uploadfile|default=''}";
        if(url.indexOf("pdf") != -1) {
            loadPDF(url)
        }
    });

    function selectAttr(type) {
        var attrarr = '';
        $('.attr' + type).each(function (key, value) {
            attrarr = attrarr + $(this).val() + ",";
        });

        var pid = 0;
        {if isset($vo['id'])}
        pid = {$vo.id};
        {/if}
            var url = "{:url('formula/attr')}?type=" + type +'&ptype='+type+'&pid='+pid;
            layer.open({
                type: 2,
                title: '选择属性',
                shadeClose: true,
                shade: 0.8,
                area: ['60%', '60%'],
                content: url,
            });
        }

        function call_back(table_html, type) {
            $('#attrlist' + type).html('');
            $('#attrlist' + type).html('' + table_html + '');
            layer.closeAll('iframe');
        }
</script>
{/block}
